<template>
  <!-- 志愿者活动组件 -->
  <view class="activity">
    <image class="activity-img bg-skeleton text-skeleton" mode="aspectFill" />
    <view class="activity-content">
      <view>
        <text class="activity-title ellipsis-1 bg-skeleton text-skeleton">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe nobis
        </text>
        <text class="activity-brief bg-skeleton text-skeleton ellipsis-2">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur animi nobis laboriosam in dignissimos
          aspernatur iusto
        </text>
      </view>
      <view class="activity-info">
        <text class="activity-info-status">
          <!-- TODO: 后续根据 status 修改状态 -->
          进行中
        </text>
        <view class="activity-info-need">
          <image :src="IconPath.USER_GREY_LINE" mode="aspectFit" class="activity-info-need-img" />
          <text class="activity-info-need-count bg-skeleton text-skeleton">
            11
          </text>
        </view>
      </view>
      <hope-button title="立即参与" />
    </view>
  </view>
</template>

<style scoped lang="scss">
.activity {
  flex: 1;
  display: flex;
  height: 100%;

  &-info {
    display: flex;

    &-status {
      padding: 6rpx 12rpx;
      color: $color-primary;
      border: 1px solid $color-primary;
      font-size: $font-size-sm;
      border-radius: 16rpx;
      background-color: $bg-primary-opacity-1;
    }

    &-need {
      display: flex;
      align-items: center;

      &-img {
        width: 35px;
        height: 35rpx;
        fill: $uni-text-color-grey;

      }

      &-count {
        color: $uni-text-color-grey;
        background-color: $color-skeleton;
      }

    }
  }

  &-img {
    flex: 4;
    border-radius: $border-radius-base;
    height: 100%;

  }

  &-content {
    display: flex;
    flex-direction: column;
    padding: 20rpx;
    justify-content: space-between;
    flex: 5;
  }

  &-title {
    font-size: $font-size-base;

  }

  &-brief {
    font-size: $font-size-sm;

  }
}
</style>
